<template>
  <CommonCard
    class="total-users"
    title="累计用户数"
    :value="usersTotal | numberFormat"
  >
    <template>
      <v-chart :option="getoption()" autoresize></v-chart>
    </template>

    <template #bottom>
      <div class="total-user-bottom">
        <div>日同比</div>
        <div class="number">{{ userGrowthLastDay }}</div>
        <div class="increment"></div>
        <div class="right">月同比</div>
        <div class="number">{{ userGrowthLastMonth }}</div>
        <div class="decrement"></div>
      </div>
    </template>
  </CommonCard>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TotalUsers",
  computed: {
    ...mapState({
      usersTotal: (state) => state.data.reportData.usersTotal, // 累计用户数
      usersLastDay: (state) => state.data.reportData.usersLastDay, // 日的数据
      usersLastMonth: (state) => state.data.reportData.usersLastMonth, // 月的数据
      userGrowthLastDay: (state) => state.data.reportData.userGrowthLastDay, // 日同比
      userGrowthLastMonth: (state) => state.data.reportData.userGrowthLastMonth, // 月同比
    }),
  },
  methods: {
    getoption() {
      return {
        xAxis: {
          show: false,
          min: 0,
          max: this.usersTotal,
        },
        yAxis: {
          show: false,
          type: "category",
        },
        series: [
          {
            name: "用户增长量",
            type: "bar",
            data: [this.usersTotal - this.usersLastMonth],
            barWidth: 10,
            showBackground: true,
            backgroundStyle: {
              color: "#fff",
            },
            itemStyle: {
              color: "yellow",
            },
            label: {
              show: true,
              formatter: "|",
              position: "right",
              color: "red",
            },
            grid: {
              left: 0,
              top: 0,
              right: 0,
              bottom: 0,
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
  .total-user-bottom{
    display: flex;
    align-items: center;
    .right{
      margin-left: 10px;
    }

  }
</style>
